
$namespace: 'em-';
@mixin ns($cls){
  $NS: $namespace+$cls;
  .#{$NS}{
    @content;
  }
}

@include ns(date-picker-input) {
  display: inline-block;
  position: relative;
  &.date-picker-clear {
    // 输入框有值时鼠标经过隐藏日期icon
    &:hover {
      .icon-date {
        display: none;
      }
    }
  }
  .icon-date {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    cursor: pointer;
    &:before {
      display: inline-block;
    }
  }
}
@include ns(date-picker) {
  position: relative;
  background: #fff;
  border: 1px solid #d9d9d9;
  box-shadow: 0 1px 6px #ddd;
  z-index: 999;
  padding: 5px;
  overflow: hidden;
  animation: slideDown 0.3s;
  transform-origin: center top;
  box-sizing: border-box;
  .calendar {
    float: left;
    display: block;
    user-select: none;
    width: 280px;
    &:nth-child(2) {
      margin-left: 10px;
    }
  }
  .calendar-head {
    height: 34px;
    line-height: 34px;
    text-align: center;
    position: relative;
    a {
      cursor: pointer;
      position: absolute;
      padding: 0 5px;
      font-weight: 700;
      font-size: 12px;
    }
    .calendar-prev-year {
      left: 5px;
    }
    .calendar-prev-month {
      left: 25px;
    }
    .calendar-year-select,
    .calendar-year-month {
      position: relative;
      padding: 0;
    }
    .calendar-next-year {
      right: 5px;
    }
    .calendar-next-month {
      right: 25px;
    }
  }
  .calendar-body {
    text-align: center;
    position: relative;




    }

    .calendar-months,
    .calendar-year {
      background: #fff;
      overflow: hidden;
      z-index: 10;
      a {
        float: left;
        width: 33.33%;
        height: 44px;
        line-height: 44px;
        display: block;
        color: #333;
        cursor: pointer;
        &:hover {
          background: #eaf8fe;
        }
        &.calendar-date-disabled {
          background: #ccc;
          cursor: not-allowed;
        }
        &.calendar-date-old {
          background: #eaf8fe;
        }
        &.calendar-date-select {
          background: #1284e7;
          color: #fff;
          font-weight: 700;
        }
      }
    }
    .calendar-time {
      height: 22px;
      line-height: 22px;
      position: relative;
      text-align: left;
      .calendar-time-input {
        border: 1px solid #d9d9d9;
        width: 80px;
      }
      input {
        width: 20px;
        text-align: center;
        border: 0;
        font-size: 12px;
        outline: none;
      }
      .btn-time {
        right: 10px;
        top: 0;
        position: absolute;
        cursor: pointer;
      }
    }
  &.date-picker-range {
    //双日历
    .calendar-year,
    .calendar-months {
      width: 202% !important;
      z-index: 5;
    }
    .btn-time {
      clear: both;
      text-align: right;
      margin-right: 10px;
      cursor: pointer;
      &:hover {
        color: #f60;
      }
    }
  }
  .clearfix {
    &:after {
      display: block;
      content: ".";
      clear: both;
      height: 0;
      line-height: 0;
      visibility: hidden;
    }
  }
}
